<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/search.css" media="all" />
</head>

<body class="white">
	<div class="mui-content" id="vueMain">
		<template v-for="item in list.citylist">
			<div class="listHead">{{item.code}}</div>
			<ul class="mui-table-view sel-list">
				<li class="mui-table-view-cell mui-checkbox mui-right" v-for="items in item.city">
					<input name="city" type="checkbox" :value="items.id" /> {{items.name}}
				</li>
			</ul>
		</template>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps;
	mui.init({
		beforeback:function(){
			if( apps.active.name != '' ){
				mui.fire(bexta.parentsView(),'toggleCity', {
					city:[apps.active]
				});
			}
			
		}
	});
	
	mui.plusReady(function () {
	   bexta.ajax(''+api.city, function(res){
	   		initVue(res);
	   });
	});
	function initVue(data){
		apps = new Vue({
			el:'#vueMain',
			data:{
				active:{name:'',value:''},
				list:data
			},
			mounted:function(){
				initEvent();
			}
		});
	}
	function initEvent(){
		 mui('.mui-content').on('tap', '.mui-checkbox', function() {
	   		mui.each(mui('input:checked'), function(){
	   			this.checked = false;
	   		});
	   		this.checked = true;
	   		apps.active.value = this.querySelector('input').value;
	   		apps.active.name = this.innerText;
	   });
	}
</script>
</body>
</html>